<template>
  <view class="chat-page">
    <!-- 聊天记录 -->
    <scroll-view class="messages" scroll-y  scroll-with-animation
      :scroll-into-view="scrollIntoView"
      ref="scrollView">
      <!-- 初始欢迎提示 -->
      <view class="message ai">
        <image class="avatar" src="/static/tiezai.png" mode="aspectFit" />
        <view class="message-content">
          欢迎您！请问有什么可以帮您？
        </view>
      </view>

      <!-- 用户和 AI 的对话 -->
      <view v-for="(msg, index) in messages" :key="index" :id="'msg-' + index" :class="['message', msg.isUser ? 'user' : 'ai']">
        <!-- 用户头像 -->
        <image v-if="msg.isUser" class="avatar" src="/static/icon_tx.png" mode="aspectFit" />
        <!-- AI 头像 -->
        <image v-if="!msg.isUser" class="avatar" src="/static/tiezai.png" mode="aspectFit" />
       <view class="message-content">
                 <rich-text v-if="!msg.isUser" :nodes="msg.nodes || msg.text" />
                 <text v-else>{{ msg.text }}</text>
        </view>
		
      </view>
    </scroll-view>

    <!-- 输入框 -->
    <view class="input-box">
      <!-- 常见问题按钮 -->
      <button class="common-question-btn" @click="toggleCommonQuestions">
        常见问题
      </button>
      <input
        v-model="userInput"
        placeholder="输入您的问题..."
        @confirm="sendMessage"
        class="input"
      />
      <button @click="sendMessage" class="send-btn">发送</button>
    </view>

    <!-- 常见问题弹窗 -->
    <view v-if="showCommonQuestions" class="common-questions-modal">
      <view class="modal-content">
        <!-- 分类 -->
        <view class="category-list">
          <view
            v-for="(category, index) in Object.keys(commonQuestions)"
            :key="index"
            class="category-item"
            @click="selectCategory(category)"
          >
            {{ category }}
          </view>
        </view>

        <!-- 分类下的常见问题 -->
        <view v-if="selectedCategory" class="question-list">
          <view
            v-for="(question, index) in commonQuestions[selectedCategory]"
            :key="index"
            class="question-item"
            @click="sendQuickReply(question)"
          >
            {{ question.title }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 引入常见问题数据
import { commonQuestions } from './commonQuestions';

// 处理 Markdown 换行并去掉其他格式
function processMarkdown(markdown) {
  // 去掉 Markdown 格式
  let text = markdown
    .replace(/#+\s*/g, '') // 去掉标题
    .replace(/\*\*(.*?)\*\*/g, '$1') // 去掉加粗
    .replace(/__(.*?)__/g, '$1') // 去掉加粗
    .replace(/\*(.*?)\*/g, '$1') // 去掉斜体
    .replace(/_(.*?)_/g, '$1') // 去掉斜体
    .replace(/-\s*\[.*?\]\(.*?\)/g, '') // 去掉链接
    .replace(/!\[.*?\]\(.*?\)/g, '') // 去掉图片
    .replace(/\n\s*-\s*/g, '\n') // 去掉无序列表
    .replace(/\n\s*\*\s*/g, '\n') // 去掉无序列表
    .replace(/\n\s*\d+\.\s*/g, '\n'); // 去掉有序列表

  // 将换行符转换为 <br>
  text = text.replace(/\n/g, '<br>');

  return text;
}

export default {
  data() {
    return {
      userInput: '', // 用户输入
      messages: [], // 聊天记录
      showCommonQuestions: false, // 是否显示常见问题弹窗
      selectedCategory: null, // 当前选中的分类
      commonQuestions, // 常见问题数据
	  systemMessage: null, // 系统提示（包含知识库）
	    scrollTop: 0, // 滚动位置
	        scrollIntoView: '', // 滚动到指定消息
    };
  },
    watch: {
      // 监听 messages 变化，自动滚动到底部
      messages() {
		  let self=this;
        this.$nextTick(() => {
          self.scrollToBottom();
        });
      },
    },
	
   async created() {
      // 初始化系统提示（包含知识库）
      this.systemMessage = await this.initializeSystemMessage();
    },
  methods: {
	   // 滚动到底部
	      scrollToBottom() {
	        const lastIndex = this.messages.length - 1;
	        if (lastIndex >= 0) {
	          this.scrollIntoView = 'msg-' + lastIndex; // 滚动到最后一条消息
	        }
	      },
	  initializeSystemMessage() {
	        // 将常见问题作为系统提示
	        const context = Object.values(this.commonQuestions)
	          .flat()
	          .map(q => `问题：${q.title}\n回答：${q.content}`)
	          .join('\n\n');
	  
	        return {
	          role: 'system',
	          content: `You are a helpful assistant. Here is some knowledge base:\n\n${context}`,
	        };
	      },
    async sendMessage() {
       if (this.userInput.trim()) {
         // 添加用户消息
         this.messages.push({ text: this.userInput, isUser: true });
 
         // 添加等待提示
         const waitingMessage = { text: '[等待AI回复中]', isUser: false };
         this.messages.push(waitingMessage);
 
         // 调用 DeepSeek 接口
         try {
           const response = await this.callDeepSeek(this.userInput);
           if (response && response.choices && response.choices.length > 0) {
             const aiResponse = response.choices[0].message.content; // 提取 AI 回复
             const processedText = processMarkdown(aiResponse); // 处理 Markdown
 
             // 替换等待提示
             const index = this.messages.indexOf(waitingMessage);
             if (index !== -1) {
               this.messages.splice(index, 1, { text: processedText, isUser: false });
             }
           } else {
             // 替换为错误提示
             const index = this.messages.indexOf(waitingMessage);
             if (index !== -1) {
               this.messages.splice(index, 1, { text: '未能获取回复，请稍后再试。', isUser: false });
             }
           }
         } catch (error) {
           console.error('请求失败:', error);
           // 替换为错误提示
           const index = this.messages.indexOf(waitingMessage);
           if (index !== -1) {
             this.messages.splice(index, 1, { text: '请求失败，请检查网络连接。', isUser: false });
           }
         }
 
         this.userInput = '';
       }
     },

    // 调用 DeepSeek 接口
    callDeepSeek(prompt) {
         return new Promise((resolve, reject) => {
			 const context = Object.values(this.commonQuestions)
			           .flat()
			           .map(q => ({
			             role: 'system',
			             content: `问题：${q.title}\n回答：${q.content}`,
			           }));
					   
           uni.request({
             url: '/deepseek/chat/completions', // DeepSeek 接口地址
             method: 'POST',
             header: {
               'Content-Type': 'application/json',
               'Authorization': 'Bearer sk-97f1c6e308fa4289b1113c91368049ca', // 替换为你的 DeepSeek API Key
             },
             data: {
               model: 'deepseek-chat', // 模型名称
               messages: [
                 {
                   role: 'system',
                   content: 'You are a helpful assistant.', // 系统提示
                 },
                 {
                   role: 'user',
                   content: prompt, // 用户输入的问题
                 },
               ],
               stream: false, // 非流式返回
             },
             success: (res) => {
               if (res.statusCode === 200) {
                 resolve(res.data); // 返回接口响应数据
               } else {
                 reject(new Error(`请求失败，状态码：${res.statusCode}`));
               }
             },
             fail: (err) => {
               reject(err); // 请求失败
             },
           });
         });
       },

    // 发送常见问题
    sendQuickReply(question) {
      this.userInput = question.title;
      this.sendMessage();
      this.showCommonQuestions = false; // 发送后关闭弹窗
    },

    // 切换常见问题弹窗
    toggleCommonQuestions() {
      this.showCommonQuestions = !this.showCommonQuestions;
      this.selectedCategory = null; // 重置选中的分类
    },

    // 选择分类
    selectCategory(category) {
      this.selectedCategory = category;
    },
  },
};
</script>

<style scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative; /* 为子元素提供定位上下文 */
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 70px; /* 为输入框留出空间，避免内容被遮挡 */
}

.message {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* AI 消息布局 */
.message.ai {
  flex-direction: row; /* 头像在左，内容在右 */
}

/* 用户消息布局 */
.message.user {
  flex-direction: row-reverse; /* 头像在右，内容在左 */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.message.ai .avatar {
  margin-right: 10px; /* AI 头像与内容间距 */
}

.message.user .avatar {
  margin-left: 10px; /* 用户头像与内容间距 */
}

.message-content {
  padding: 10px;
  border-radius: 5px;
  max-width: 70%;
  word-wrap: break-word;
  box-sizing: border-box;
}

.message.ai .message-content {
  background-color: #ffffff;
}

.message.user .message-content {
  background-color: #e1f5fe;
}

/* 底部输入区域 */
.input-box {
  position: fixed; /* 固定在底部 */
  bottom: 0; /* 贴紧底部 */
  left: 0; /* 贴紧左侧 */
  right: 0; /* 贴紧右侧 */
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 元素之间的间距 */
  padding: 10px;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  box-sizing: border-box;
  z-index: 10; /* 确保输入框在内容之上 */
}

/* 常见问题按钮 */
.common-question-btn {
  height: 40px; /* 统一高度 */
  line-height: 40px; /* 文字垂直居中 */
  padding: 0 15px; /* 左右内边距 */
  background-color: #409eff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

/* 输入框 */
.input {
  flex: 1; /* 占据剩余空间 */
  height: 40px; /* 统一高度 */
  padding: 0 10px; /* 左右内边距 */
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
}

/* 发送按钮 */
.send-btn {
  height: 40px; /* 统一高度 */
  line-height: 40px; /* 文字垂直居中 */
  padding: 0 20px; /* 左右内边距 */
  background-color: #409eff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.common-questions-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-item {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

.question-list {
  margin-top: 20px;
}

.question-item {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
}
</style>